<template>
  <div class="fullMain">
    <x-header class="custumHeader" :left-options="{backText: '',showBack: false}">
      群管理
    </x-header>
    <div style="height:20px"/>
    <!--插入添加成员的弹窗-->
    <CreateGroup :isShowCreate.sync="isShowCreate"></CreateGroup>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert" > {{alertText}}</alert>
    </div>
    <!--插入修改群名的弹窗-->
    <ModifyGroupInfo :isShowModifyGroupInfo.sync="isShowModifyGroupInfo"></ModifyGroupInfo>
    <!-- 插入底部导航栏 -->
    <NavigationOfReport :flagOfItem.sync = "flagOfItem"></NavigationOfReport>
    <div class="mainbBg">
      <div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>
        <span class="ids">
          姓名：{{ userInfo.detail.name}}
        </span>
      </div>
      <div class="groupDiv" style="width:auto">
        <!--        <input placeholder="搜索" :show-clear="false" style="background-color:#faf7f7;">-->
        <div class="groupD" style="height: 47px;">
          <i class="fa fa-users"></i>
          <span @click="createGroup">新建群</span><br>
          <!-- 导师无需加入任何分组
            <i class="fa fa-users"></i>
            <span @click="joinGroup">加入分组</span>
            -->
        </div>
        <!--循环输出所有群-->
        <div class="groupDetail" v-for="(item,index) in allGroupList" :key="index">
          <i class="fa fa-users"></i>
          <span id='groupInfo' @click="toGroupMembersPage(item)">{{item.detail.groupName}}</span>
          <!--          <button @click="modify(item.groupId)" class="dButton" >编辑</button>-->
          <!-- <button @click="deleteGroupInThisPage(item.groupId)" class="dButton">删除</button> -->
          <!-- 确认框 -->
          <div v-transfer-dom>
            <confirm v-model="isShowConfirm" title="" @on-cancel="onCancel" @on-confirm="onConfirm">
              <p style="text-align:center;">请问是否需要删除该群？所有数据将不能恢复，请慎重考虑!</p>
            </confirm>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {PopupPicker, XHeader, XInput,Confirm,TransferDom} from 'vux'
  import CreateGroup from 'components/CreateGroup2/CreateGroup.vue'
  import ModifyGroupInfo from 'components/ModifyGroupName/ModifyGroupInfo.vue'
  import {mapState} from 'Vuex'
  import group from 'api/group'
  import {compareByProp} from 'utilMethods/sort.js'
  import NavigationOfReport from 'components/Navigation/NavigationOfReport.vue'

  export default {
    name: 'G_group_manage',
    data () {
      return {
        alertText: '', // 验证提示框的文本
        isShowAlert: false, // 是否显示验证提示,
        ssTitle: '',
        ssValue: [],
        // tjP: '搜索',
        isShowCreate: false,
        allGroupList: [],
        isShowModifyGroupInfo: false,
        isShowConfirm: false,
        deleteFlag:false,
        deleteGroupId:'',
        // isShowEnter: false
        flagOfItem:'group'
      }
    },
    computed: {
      ...mapState(['allGroups']),
      ...mapState({
        userInfo: state => state.user.userInfo
      })
    },
    components: {
      XHeader,
      XInput,
      PopupPicker,
      CreateGroup,
      ModifyGroupInfo,
      Confirm,
      TransferDom,
      NavigationOfReport
    },
    directives: {
      TransferDom
    },
    mounted () {
      // this.$store.dispatch('getAllGroups')
      this.getAllGroups()
    },
    watch: {
      isShowCreate (val) {
        this.getAllGroups()
        // this.$store.dispatch('getAllGroups')
      },
      deleteFlag (val) {
      }

    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      createGroup () {
        this.isShowCreate = true
      },
      onCancel () {
        this.isShowConfirm = false
        this.deleteFlag=false
      },
      async onConfirm () {
        this.deleteFlag=true
        this.deleteGroupInThisPage(this.deleteGroupId)
      },
      modify (groupId) {
        this.isShowModifyGroupInfo = true
      },
      async getAllGroups () {
        const result = await group.getGroupsUnderControl()
        console.log(result)
        if (result.code === 0) {
          this.showAlert('查询失败，请重试。')
        } else if (result.data.length === 0) {
          // this.showAlert('您暂时没有创建任何群')
        } else {
          this.allGroupList = result.data
          // let propNameList = "detail groupName".trim().split(" ")
          // console.log(propNameList)
          // let requiredElementOfA = this.allGroupList[0]
          // for (let i = 0; i < propNameList.length; i++) {
          //   requiredElementOfA = requiredElementOfA[propNameList[i]]
          // }
          // console.log(requiredElementOfA)
          // console.log(requiredElementOfA.length)
          // console.log(result.data[0]["detail"]["groupName"])
          this.allGroupList.sort(compareByProp("detail groupName"))
        }
      },
      toGroupMembersPage(item){
        this.$store.commit('recordGroupPresent',item)
        this.$router.push({name: 'G_group_member'})
      }
    }
  }
</script>
<style>
  .dButton {
    display: inline;
    border: #bebebe solid;
    background: #1abc9c;
    border-radius: 2px;
    margin-right: 2px;
    /* border:#bebebe solid;
    align-items: center;
    margin-top: 10px;
    color: #fff;
    background: #1abc9c;
    border-radius: 2px; */
  }

  #groupInfo {
    display: inline-block;
    margin-left: 5px;
    width: 65%;
    max-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
